<template>
  <div>
    <el-drawer
      title="充值"
      :before-close="handleClose"
      :visible.sync="teamRechargeDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="40%"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="rechargeForm"
          ref="rechargeFormRef"
          :rules="rechargeFormRule"
          label-position="top"
        >
          <el-form-item label="充值油站选择" prop="stationId" size="small">
            <el-select
              v-model="rechargeForm.stationId"
              :clearable="true"
              filterable
              placeholder="请选择油站"
              size="small"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="充值金额" prop="rechargeAmount">
            <el-input
              v-model="rechargeForm.rechargeAmount"
              autocomplete="off"
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="赠送金额" prop="giftAmount">
            <el-input
              v-model="rechargeForm.giftAmount"
              autocomplete="off"
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="实际到账">
            <h3>{{ sumAmt }} 元</h3>
          </el-form-item>
          <div class="demo-drawer__footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="loading"
              >确定</el-button
            >
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { teamCardRechargeApi } from "@/api/teamCard/teamCardList";
import { listEnterpriseStation } from "@/api/dept";
export default {
  name: "TeamRecharge",
  props: {
    teamRechargeDialog: {
      type: Boolean,
      default: false,
    },
    currentData: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    // 实际到账
    sumAmt() {
      let amt =
        Number(this.rechargeForm.rechargeAmount) +
        (Number(this.rechargeForm.giftAmount) || 0);
      return amt.toFixed(2);
    },
  },
  watch: {
    currentData: {
      handler(val) {
        if (val.id) {
          this.rechargeForm.id = val.id;
        }
      },
      deep: true,
    },
    teamRechargeDialog(val) {
      console.log(val);
      if (val) {
        this.getStationList();
      }
    },
  },
  data() {
    // 充值金额
    let checkRechargeAmt = (rule, value, callback) => {
      let amount = Number(value.trim());
      const reg = /^\d+(\.\d{1,2})?$/;
      if (!value) return callback(new Error("请输入金额"));
      if (value <= 0) return callback(new Error("金额不能小于等于0"));
      if (Number.isNaN(amount)) return callback(new Error("请输入合法数字"));
      if (!reg.test(amount)) return callback(new Error("金额最多保留两位小数"));
      callback();
    };

    // 充值赠送金额
    let checkgiftAmount = (rule, value, callback) => {
      let amount = Number(value.trim());
      const reg = /^\d+(\.\d{1,2})?$/;
      if (value < 0) return callback(new Error("金额不能小于0"));
      if (Number.isNaN(amount)) return callback(new Error("请输入合法数字"));
      if (!reg.test(amount)) return callback(new Error("金额最多保留两位小数"));
      callback();
    };
    return {
      rechargeForm: {
        id: "",
        rechargeAmount: "", // 充值金额
        giftAmount: "", // 赠送金额
      },
      rechargeFormRule: {
        rechargeAmount: [
          { required: true, validator: checkRechargeAmt, trigger: "blur" },
        ],
        giftAmount: [{ validator: checkgiftAmount, trigger: "blur" }],
        stationId: [
          { required: true, message: "请选择油站", trigger: "change" },
        ],
      },
      loading: false,
      stationList: [],
    };
  },
  methods: {
    handleClose() {
      this.$emit("update:teamRechargeDialog", false);
      this.resetForm("rechargeFormRef");
    },
    handleSubmit() {
      this.$refs.rechargeFormRef.validate((valid) => {
        if (valid) {
          console.log("submit");
          this.loading = true;
          // 充值、赠送金额为空,以及去空格
          this.rechargeForm.rechargeAmount =
            this.rechargeForm.rechargeAmount.trim();
          let giftAmount = this.rechargeForm.giftAmount.trim();
          if (!giftAmount) {
            this.rechargeForm.giftAmount = "0";
          } else {
            this.rechargeForm.giftAmount = giftAmount;
          }
          teamCardRechargeApi(this.rechargeForm).then((res) => {
            this.loading = false;
            this.msgSuccess("车队卡充值成功");
            this.handleClose();
            this.$emit("reloadData");
          });
        } else {
          console.log("error submit");
          this.loading = false;
          return false;
        }
      });
    },
    getStationList() {
      console.log(this.presentEnterprise);
      const enterpriseId =
        this.presentEnterprise && this.presentEnterprise.enterpriseId
          ? this.presentEnterprise.enterpriseId
          : "";

      //  0 : 未启用  1 启用
      listEnterpriseStation({ enterpriseId: enterpriseId, status: "1" }).then(
        (res) => {
          this.stationList = res;
        }
      );
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-drawer {
  .el-drawer__header {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    font-size: 20px;
    margin-bottom: 0px;
  }
  .el-drawer__body {
    padding: 20px;
    overflow-y: auto;

    .el-form-item__content {
      display: flex;
      .el-select {
        flex: 1;
      }
    }
  }
  .demo-drawer__footer {
    text-align: right;
  }
}
</style>
